<template>
  <view class="container">
    <view class="info">
      <view class="item font">
        当前商户：{{ corpName }}
      </view>
      <view class="balance">
        账户余额：
        <view class="price">
          {{ balance }}
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="title font">
        充值金额
      </view>
      <view class="input">
        <input
          v-model="chargeVal"
          type="number"
          placeholder="请输入充值金额"
        >
      </view>
    </view>
    <button
      :disabled="btnLoading"
      :loading="btnLoading"
      class="btn"
      @click="submit"
    >
      提交
    </button>
  </view>
</template>

<script>
	import {
		corpPay
	} from '@/common/js/corpPay.js';
	
	export default {
		data() {
			return {
				btnLoading: false,
				corpName: '',
				balance: 0,
				chargeVal: ''
			}
		},
    watch: {
      'chargeVal':'changeVal'
    },
		onShow() {
			this.getCorpinfo();
		},
		methods: {
      changeVal(){
        this.chargeVal=Number(this.chargeVal)
      },
			getCorpinfo() {
				this.$ajax({
				  method: 'get',
				  url: '/outing/mobile/corpinfo/queryCorpInfo'
				}).then(res => {
					if(res.data) {
						const { corpName, balance } = res.data
						this.corpName = corpName || '';
						this.balance = balance || 0;
					}
				});
			},
			submit() {
				if(this.chargeVal) {
					this.btnLoading = true
					this.$ajax({
					  method: 'post',
					  url: '/outing/mobile/corpinfo/add',
						header: 'application/json',
						data: {
							totalAmount: this.chargeVal
						}
					}).then(res => {
						this.btnLoading = false
						if(res.data) {
							// 请求支付
							corpPay(res.data).finally(e => {
								this.btnLoading = false;
							});
						} else {
							this.btnLoading = false;
						}
					}).catch(() => {
						this.btnLoading = false
					});
				} else {
					uni.showToast({
						title: "请输入充值金额"
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 60upx 20upx 40upx 20upx;
		height: 100vh;
		background: #F7F9FB;
		
		.info {
			padding: 20upx;
			margin-bottom: 20upx;
			background: #ffffff;
			height: 142upx;
			
			.balance {
				font-size: 28upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 40upx;
				display: flex;
				margin-top: 10upx;
				.price {
					color: #FE7D15;
					&:before {
						content: '￥';
					}
				}
			}
		}
		
		.bottom {
			padding: 20upx;
			background: #ffffff;
			.title {
				margin-bottom: 30upx;
			}
			.input {
				display: flex;
				&:before {
					content: '￥';
					font-size: 50upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}
		
		.font {
			font-size: 30upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 42upx;
		}
	}
	
	.btn {
		width: 610upx;
		height: 82upx;
		color: #FFF;
		font-size: 32upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		text-align: center;
		line-height: 82upx;
		background: linear-gradient(135deg, #F78833 0%, #FFC77B 100%);
		border-radius: 40upx;
		margin: 0 auto;
		margin-top: 90upx;
	}
</style>